<template>
  <div>
    <el-dialog title="sku列表" :visible.sync="dialogVisible" width="60%">
      <el-table :data="homeInfo" border style="width: 100%">
        <el-table-column fixed label="图片" width="150">
          <template slot-scope="scope">
            <img
              style="width: 100px; height: 100px"
              :src="scope.row.pic"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="颜色" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.spData[0].value"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="大小" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.spData[1].value"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="库存" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stock"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="预警库存" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.lowStock"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="锁定库存" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.lockStock"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="suk编码" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.skuCode"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="销量" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sale"></el-input>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >

            <el-button type="text" size="small" @click="alter(scope.row.id)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import product from '@/api/product.js'
export default {
  data() {
    return {
      dialogVisible: false,
      homeInfo: [],
      SkuInfo: {
        id: '',
        lockStock: '', //锁定库存
        lowStock: '', //预警库存
        pic: '', //展示图片
        price: '', //价格
        productId: '',
        sale: '', //销量
        skuCode: '', //sku编码
        spData: '', //颜色大小
        stock: '', //库存
      },
    }
  },
  created() {},
  mounted() {},
  methods: {
    //删除
    handleClick(row) {
      product.delSkuApi(row).then(res => {
        console.log(row, '删除的res')
      })
      this.open()
    },
    //修改
    alter(row) {
      console.log(row, '修改')
      // product
      //   .updateSkuInfoApi({
      //     id: row,
      //     lockStock: this.SkuInfo.lockStock,
      //     lowStock: this.SkuInfo.lowStock,
      //     pic: this.SkuInfo.pic,
      //     price: this.SkuInfo.price,
      //     productId: this.SkuInfo.productId,
      //     sale: this.SkuInfo.sale,
      //     skuCode: this.SkuInfo.skuCode,
      //     // lockStock:this.homeInfo.lockStock,
      //     stock: this.SkuInfo.stock,
      //   })
      //   .then(res => {
      //     console.log(res, '修改的res')
      //   })
    },
    submit() {
      this.dialogVisible = false
    },
    //子组件的打开方法
    open(row) {
      console.log(row, 'suk的row1111')
      this.dialogVisible = true

      product.getSkusByProductIdApi(row).then(res => {
        this.homeInfo = res.data.items
        this.homeInfo[0].spData = JSON.parse(this.homeInfo[0].spData)
        console.log(this.homeInfo, 'skures')
      })
    },
    getSkusByProductId() {},
  },
}
</script>

<style scoped lang="scss">
</style>